<template>
  <div>
    <Card>
      <Row>
        <Col span="8" style="background:#eee;padding:20px" v-for="(item, index) in  baseAppList" :key="index">
          <Card :bordered="false">
            <p slot="title">{{item.name}}</p>
            <div style="text-align:center">
              <h3>{{item.description}}</h3>
            </div>
            <div v-if="item.trialStatus == 0 && item.onlineStatus == 0">
              <p>当前状态:新记录</p>
              <p>开始时间:{{item.startTime}}</p>
              <p>到期时间:{{item.endTime}}</p>
              <Button type="success" icon="ms-add" @click="handleTrial(item.id)">申请试用</Button>&nbsp;
              <Button type="success" icon="ms-add">购买</Button>
            </div>
            <div v-if="item.trialStatus == 1">
              <p>当前状态:试用待审批</p>
              <p>开始时间:{{item.startTime}}</p>
              <p>到期时间:{{item.endTime}}</p>
              <Button type="success" icon="ms-add">购买</Button>
            </div>
            <div v-if="item.trialStatus == 2 && item.onlineStatus == 0">
              <p>当前状态:试用中</p>
              <p>开始时间:{{item.startTime}}</p>
              <p>到期时间:{{item.endTime}}</p>
              <Button type="success" icon="ms-add">购买</Button>
            </div>
            <div v-if="item.onlineStatus == 2">
              <p>当前状态:使用中</p>
              <p>开始时间:{{item.startTime}}</p>
              <p>到期时间:{{item.endTime}}</p>
              <Button type="success" icon="ms-close">注销</Button>
            </div>
          </Card>
        </Col>
      </Row>
    </Card>
  </div>
</template>
<script>
import Tables from '_c/tables'
import { mapGetters } from 'vuex'
import {
  page as getAppPage
} from '@/api/admin/application/index'
import {
  page as getAppOrder, addObj
} from '@/api/admin/myAccount/index'
export default {
  name: 'myAccount',
  components: {
    Tables
  },
  data () {
    return {
      tenantManager_btn_add: false,
      tenantManager_btn_frozen: false,
      listLoading: false,
      total: 0,
      list: [],
      listQuery: {
        page: 1,
        limit: 50,
        name: undefined
      },
      baseAppList: []
    }
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  created () {
    this.tenantManager_btn_add = this.elements['tenantManager:btn_add']
    this.getList()
  },
  methods: {
    handleTrial (appId) {
      const order = { appId: appId, trialStatus: 1, onlineStatus: 0 }
      addObj(order).then(response => {
        this.$Notice.success({
          title: '成功',
          desc: '创建成功'
        })
        this.getList()
      })
    },
    getList () {
      getAppPage({}).then(response => {
        this.baseAppList = []
        for (let i = 0; i < response.data.rows.length; i++) {
          let item = response.data.rows[i]
          getAppOrder({ appId: item.id }).then(orderResult => {
            if (orderResult.data.rows.length > 0) {
              const order = orderResult.data.rows[0]
              item.onlineStatus = order.onlineStatus
              item.trialStatus = order.trialStatus
              item.startTime = order.startTime
              item.endTime = order.endTime
            } else {
              item.onlineStatus = 0
              item.trialStatus = 0
            }
            this.baseAppList.push(item)
          })
        }
      })
    }
  }
}
</script>
